<template>
  <div class="pond-air-container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="title-section">
        <h1 class="main-title">鱼塘风扇</h1>
        <span class="location">当前位置：智慧农业-鱼塘通风区</span>
      </div>
      <button class="back-btn" @click="handleBack">返回</button>
    </div>

    <!-- 数据展示区域（池塘水温 + 空气湿度） -->
    <div class="data-grid">
      <!-- 池塘水温卡片（映射 fishpond.airTemperature，对应数据库 airTemperature） -->
      <div class="data-card" :class="getWaterTempClass()">
        <div class="data-icon">🌡️</div>
        <div class="data-info">
          <h3 class="data-name">池塘水温</h3>
          <p class="data-value">
            {{ formatValidValue(fishpondData.airTemperature, 'temperature') }}
          </p>
          <p class="data-status">{{ getWaterTempStatus() }}</p>
        </div>
      </div>

      <!-- 空气湿度卡片（映射 fishpond.airHumidity，对应数据库 airHumidity） -->
      <div class="data-card" :class="getAirHumidityClass()">
        <div class="data-icon">💧</div>
        <div class="data-info">
          <h3 class="data-name">空气湿度</h3>
          <p class="data-value">
            {{ formatValidValue(fishpondData.airHumidity, 'humidity') }}
          </p>
          <p class="data-status">{{ getAirHumidityStatus() }}</p>
        </div>
      </div>
    </div>

    <!-- 新增：柱状图筛选选项区域 -->
    <div class="chart-filter">
      <button
          class="filter-btn"
          :class="{ 'active': selectedType === 'airTemperature' }"
          @click="handleFilterClick('airTemperature')"
      >
        池塘水温
      </button>
      <button
          class="filter-btn"
          :class="{ 'active': selectedType === 'airHumidity' }"
          @click="handleFilterClick('airHumidity')"
      >
        空气湿度
      </button>
    </div>

    <!-- 新增：柱状图展示区域 -->
    <div class="chart-container">
      <div id="bar-chart" class="chart"></div>
    </div>

    <!-- 状态信息 -->
    <div class="status-bar">
      <span v-if="isLoading">数据加载中...</span>
      <span v-else-if="!isSystemOnline" class="offline-warning">
        ⚠️ 离线模式，显示最近缓存数据
      </span>
      <span v-else>最后更新：{{ lastUpdateTime || '未更新' }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, ref, onUnmounted } from 'vue'
import { useFarmStore } from '@/stores/farm'
import { useRouter } from 'vue-router'
// 引入ECharts
import * as echarts from 'echarts'

// 初始化仓库和路由
const farmStore = useFarmStore()
const router = useRouter()

// 状态数据（绑定 fishpond 场景映射后字段：airTemperature、airHumidity）
const fishpondData = computed(() => farmStore.farmData || {})
const isLoading = computed(() => farmStore.isLoading)
const isSystemOnline = computed(() => farmStore.isSystemOnline)
const lastUpdateTime = computed(() => farmStore.lastUpdateTime)

// 新增：图表相关状态
const selectedType = ref('') // 选中的图表数据类型（初始为空）
const chartInstance = ref(null) // 图表实例（用于更新/销毁）
const historyData = ref({ // 历史数据存储（格式：[{time: '时间字符串', value: 数值}, ...]）
  airTemperature: [],
  airHumidity: []
})

// 页面加载时获取鱼塘场景数据+初始化图表
onMounted(async () => {
  try {
    await farmStore.fetchFishpondData() // 与 farm.js 中 fetchFishpondData 方法对应
    // 初始化空柱状图
    initChart()
    // 30秒定时刷新数据+图表（若已选中类型）
    const refreshInterval = setInterval(async () => {
      await farmStore.fetchFishpondData()
      if (selectedType.value) {
        await fetchHistoryData(selectedType.value)
        updateChart()
      }
    }, 30000)

    // 组件卸载时清除定时器和图表资源
    onUnmounted(() => {
      clearInterval(refreshInterval)
      if (chartInstance.value) {
        chartInstance.value.dispose() // 销毁图表，避免内存泄漏
      }
    })
  } catch (err) {
    console.error('初始化加载鱼塘数据失败:', err)
  }
})

// 返回按钮（返回智慧鱼塘首页）
const handleBack = () => {
  router.push('/dashboard/smart-pond')
}

// 有效数字判断（排除 undefined、null、''、NaN，新增数值合理性校验）
const isNumeric = (value) => {
  if (value === undefined || value === null || value === '' || isNaN(Number(value))) {
    return false
  }
  // 新增：数值范围合理性校验（避免 15541 这种异常值）
  return true
}

// 格式化显示值（处理异常数值和单位）
const formatValidValue = (value, type) => {
  if (!isNumeric(value)) {
    return '无数据'
  }

  const numValue = Number(value)
  // 处理土壤湿度异常值（预留逻辑）
  if (type === 'soilMoisture') {
    if (numValue > 100) {
      const percent = Math.min(Math.round(numValue / 100), 100) // 超过100按100算
      return `${percent} %`
    }
    return `${numValue.toFixed(1)} %`
  }
  // 温度保留1位小数
  if (type === 'temperature') {
    return `${numValue.toFixed(1)} °C`
  }
  // 湿度保留1位小数
  if (type === 'humidity') {
    return `${numValue.toFixed(1)} %`
  }
  return value
}

// ---------------------- 数据状态判断（适配鱼塘场景阈值）----------------------
// 池塘水温状态（鱼塘适宜：20-28°C，鱼类生存核心温度）
const getWaterTempStatus = () => {
  const temp = fishpondData.value.airTemperature
  if (!isNumeric(temp)) return '无数据'

  const numTemp = Number(temp)
  if (numTemp >= 20 && numTemp <= 28) return '适宜'
  if ((numTemp >= 16 && numTemp < 20) || (numTemp > 28 && numTemp <= 32)) return '警示'
  return '危险'
}

// 水温样式类
const getWaterTempClass = () => {
  switch (getWaterTempStatus()) {
    case '适宜': return 'status-normal'
    case '警示': return 'status-warning'
    case '危险': return 'status-danger'
    default: return 'status-none'
  }
}

// 空气湿度状态（鱼塘适宜：60-80%，影响水体溶氧量）
const getAirHumidityStatus = () => {
  const humidity = fishpondData.value.airHumidity
  if (!isNumeric(humidity)) return '无数据'

  const numHumidity = Number(humidity)
  if (numHumidity >= 60 && numHumidity <= 80) return '适宜'
  if ((numHumidity >= 50 && numHumidity < 60) || (numHumidity > 80 && numHumidity <= 90)) return '警示'
  return '危险'
}

// 空气湿度样式类
const getAirHumidityClass = () => {
  switch (getAirHumidityStatus()) {
    case '适宜': return 'status-normal'
    case '警示': return 'status-warning'
    case '危险': return 'status-danger'
    default: return 'status-none'
  }
}

// ---------------------- 新增：柱状图相关逻辑 ----------------------
// 初始化空柱状图
const initChart = () => {
  const chartDom = document.getElementById('bar-chart')
  chartInstance.value = echarts.init(chartDom)
  // 空图表配置（提示选择数据类型）
  const emptyOption = {
    title: {
      text: '鱼塘环境数据历史趋势',
      subtext: '请选择下方数据类型查看',
      left: 'center',
      textStyle: { fontSize: 16 },
      subtextStyle: { fontSize: 14, color: '#999' }
    },
    grid: { left: '10%', right: '5%', bottom: '15%' },
    xAxis: {
      type: 'category',
      data: [],
      axisLine: { lineStyle: { color: '#eee' } }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#eee' } },
      splitLine: { lineStyle: { color: '#f5f5f5' } }
    },
    series: [{
      data: [],
      type: 'bar',
      itemStyle: { color: '#ccc' }
    }],
    tooltip: {
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: { color: '#fff' },
      // 容错处理：避免无数据时报错
      formatter: (params) => {
        if (!params || !params.length) return '无数据'
        const item = params[0]
        return item.name ? `${item.name}<br/>无具体数据` : '无数据'
      }
    }
  }
  chartInstance.value.setOption(emptyOption)
  // 窗口 resize 时图表自适应
  window.addEventListener('resize', () => {
    chartInstance.value?.resize()
  })
}

// 筛选按钮点击事件
const handleFilterClick = async (type) => {
  selectedType.value = type // 记录选中类型
  await fetchHistoryData(type) // 获取对应历史数据
  updateChart() // 更新图表展示
}

// 从Store获取指定类型的最后20条历史数据（数据来源：鱼塘场景）
const fetchHistoryData = async (type) => {
  try {
    // 调用Store的fetchHistoryData方法（适配鱼塘场景）
    const res = await farmStore.fetchHistoryData(type, 20)
    // 过滤无效数据（确保time和value有效）
    historyData.value[type] = res?.filter(item => item.time && item.value !== null) || []
  } catch (err) {
    console.error(`获取${getTypeName(type)}历史数据失败：`, err)
    historyData.value[type] = []
  }
}

// 辅助：根据类型获取中文名称
const getTypeName = (type) => {
  const nameMap = {
    airTemperature: '池塘水温',
    airHumidity: '空气湿度'
  }
  return nameMap[type] || type
}

// 辅助：根据类型获取单位
const getTypeUnit = (type) => {
  const unitMap = {
    airTemperature: '°C',
    airHumidity: '%'
  }
  return unitMap[type] || ''
}

// 更新柱状图数据
const updateChart = () => {
  if (!chartInstance.value || !selectedType.value) return

  // 柱状图配置映射（贴合鱼塘场景蓝色主色调）
  const chartConfig = {
    airTemperature: {
      title: '池塘水温历史趋势',
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#2196f3' },
        { offset: 1, color: '#1976d2' }
      ]) // 蓝色渐变
    },
    airHumidity: {
      title: '空气湿度历史趋势',
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#42a5f5' },
        { offset: 1, color: '#1565c0' }
      ]) // 深蓝色渐变
    }
  }[selectedType.value]

  // 提取x轴（时间）和y轴（数值）数据
  const dataList = historyData.value[selectedType.value]
  const xData = dataList.map(item => item.time)
  const yData = dataList.map(item => item.value)

  // 最新图表配置（带容错处理）
  const option = {
    title: {
      text: chartConfig.title,
      left: 'center',
      textStyle: {
        color: chartConfig.color.colorStops[0].color,
        fontSize: 16
      }
    },
    grid: { left: '10%', right: '5%', bottom: '15%' },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        rotate: 45, // 时间文字旋转45度，避免重叠
        interval: xData.length > 10 ? Math.ceil(xData.length / 10) : 0, // 数据过多时间隔显示
        color: '#666'
      },
      axisLine: { lineStyle: { color: chartConfig.color.colorStops[0].color } }
    },
    yAxis: {
      type: 'value',
      name: getTypeUnit(selectedType.value),
      nameTextStyle: {
        color: chartConfig.color.colorStops[0].color,
        fontSize: 12
      },
      axisLine: { lineStyle: { color: chartConfig.color.colorStops[0].color } },
      splitLine: { lineStyle: { color: '#f5f5f5' } },
      axisLabel: { color: '#666' }
    },
    tooltip: {
      trigger: 'axis',
      // 容错处理：避免数据undefined报错
      formatter: (params) => {
        if (!params || !params.length) return '无数据'
        const item = params[0]
        if (!item || !item.name) return '无数据'
        const value = item.value !== null && item.value !== undefined ? item.value : '无'
        return `${item.name}<br/>${getTypeName(selectedType.value)}：${value}${getTypeUnit(selectedType.value)}`
      },
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: { color: '#fff' },
      borderRadius: 4
    },
    series: [{
      data: yData.map((val, idx) => ({ name: xData[idx], value: val })),
      type: 'bar', // 柱状图核心配置
      barWidth: '60%', // 柱子宽度（占类目宽度的60%）
      itemStyle: {
        color: chartConfig.color,
        borderRadius: [4, 4, 0, 0] // 柱子顶部圆角
      },
      label: {
        show: true, // 显示柱子顶部数值
        position: 'top',
        color: chartConfig.color.colorStops[0].color,
        fontSize: 11
      }
    }]
  }

  // 应用新配置
  chartInstance.value.setOption(option, true)
}
</script>

<style scoped>
/* 整体容器样式 */
.pond-air-container {
  min-height: 100vh;
  padding: 20px;
  background-color: #f0f8fb; /* 鱼塘场景背景色：浅蓝色系 */
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

/* 标题区域样式 */
.header {
  margin-bottom: 30px;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.main-title {
  color: #1976d2; /* 鱼塘场景主色调：蓝色 */
  margin: 0;
  font-size: 28px;
}

.location {
  margin-left: 15px;
  color: #666;
  font-size: 14px;
  align-self: flex-end;
  margin-bottom: 5px;
}

/* 接上面未完成的 style 部分 */
.back-btn {
  background-color: #2196f3; /* 蓝色按钮 */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #1976d2; /* 深蓝色 hover 效果 */
}

/* 数据网格样式（适配2个卡片） */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.data-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-top: 4px solid #ccc;
}

.data-icon {
  font-size: 40px;
  margin-right: 20px;
  min-width: 50px;
  text-align: center;
}

.data-info {
  flex: 1;
}

.data-name {
  margin: 0 0 10px 0;
  color: #555;
  font-size: 18px;
}

.data-value {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: bold;
}

.data-status {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* 状态颜色样式（保持与其他模块一致） */
.status-normal {
  border-top-color: #4caf50; /* 绿色 - 适宜 */
}

.status-normal .data-value,
.status-normal .data-status {
  color: #4caf50;
}

.status-warning {
  border-top-color: #ffc107; /* 黄色 - 警示 */
}

.status-warning .data-value,
.status-warning .data-status {
  color: #ffc107;
}

.status-danger {
  border-top-color: #f44336; /* 红色 - 危险 */
}

.status-danger .data-value,
.status-danger .data-status {
  color: #f44336;
}

.status-none .data-value,
.status-none .data-status {
  color: #9e9e9e; /* 灰色 - 无数据 */
}

/* 新增：柱状图筛选选项样式（贴合鱼塘蓝色主色调） */
.chart-filter {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 0 10px;
}

.filter-btn {
  background-color: white;
  border: 2px solid #2196f3;
  color: #2196f3;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
  box-sizing: border-box;
}

.filter-btn:hover {
  background-color: #e3f2fd; /* 浅蓝色 hover 背景 */
}

.filter-btn.active {
  background-color: #2196f3;
  color: white;
}

/* 新增：柱状图容器样式 */
.chart-container {
  width: 100%;
  height: 400px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  box-sizing: border-box;
}

.chart {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* 状态条样式 */
.status-bar {
  text-align: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
  box-sizing: border-box;
}

.offline-warning {
  color: #ff9800;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr;
  }

  .title-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .location {
    margin-left: 0;
    margin-top: 5px;
  }

  /* 筛选按钮换行适配 */
  .chart-filter {
    gap: 10px;
  }

  .filter-btn {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    font-size: 14px;
  }

  /* 图表高度适配移动端 */
  .chart-container {
    height: 300px;
  }

  /* Vue3 深度选择器：适配图表文字大小 */
  .chart :deep(.ec-xtick-label) {
    font-size: 11px !important;
  }
  .chart :deep(.ec-yaxis-label) {
    font-size: 11px !important;
  }
}

/* 适配更小屏幕（375px以下） */
@media (max-width: 375px) {
  .pond-air-container {
    padding: 10px;
  }

  .main-title {
    font-size: 24px;
  }

  .data-card {
    padding: 15px;
  }

  .data-icon {
    font-size: 32px;
    margin-right: 15px;
  }

  .data-value {
    font-size: 24px;
  }

  .filter-btn {
    min-width: 100px;
    font-size: 13px;
    padding: 6px 10px;
  }

  .chart-container {
    height: 250px;
  }
}

</style>